<template>
  <div class="order-list-container">
    <el-card>
      <div slot="header">
        <span>我的订单</span>
      </div>
      
      <el-tabs v-model="activeTab" @tab-click="handleTabChange">
        <el-tab-pane label="全部订单" name="all"></el-tab-pane>
        <el-tab-pane label="待支付" name="0"></el-tab-pane>
        <el-tab-pane label="处理中" name="1,2"></el-tab-pane>
        <el-tab-pane label="已完成" name="3"></el-tab-pane>
        <el-tab-pane label="已取消" name="4"></el-tab-pane>
      </el-tabs>
      
      <el-table
        v-loading="loading"
        :data="orders"
        style="width: 100%">
        <el-table-column
          prop="orderNo"
          label="订单编号"
          width="180">
        </el-table-column>
        <el-table-column
          label="服务类型"
          width="120">
          <template slot-scope="scope">
            {{ scope.row.serviceTypeName || '未知服务' }}
          </template>
        </el-table-column>
        <el-table-column
          label="数量"
          width="80">
          <template slot-scope="scope">
            {{ scope.row.quantity }}件
          </template>
        </el-table-column>
        <el-table-column
          label="金额"
          width="100">
          <template slot-scope="scope">
            ¥{{ scope.row.totalAmount }}
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          width="120">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">{{ getStatusText(scope.row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          width="160">
          <template slot-scope="scope">
            {{ formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="viewOrderDetail(scope.row.orderNo)">详情</el-button>
            <el-button
              v-if="scope.row.status === 0"
              size="mini"
              type="primary"
              @click="handlePay(scope.row.orderNo)">支付</el-button>
            <el-button
              v-if="scope.row.status === 0"
              size="mini"
              type="danger"
              @click="handleCancel(scope.row.orderNo)">取消</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="empty-block" v-if="orders.length === 0 && !loading">
        <el-empty description="暂无订单数据"></el-empty>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getOrderList, cancelOrder, payOrder } from '@/api/order'
import { formatDate } from '@/utils/date'

export default {
  name: 'OrderList',
  data() {
    return {
      activeTab: 'all',
      loading: false,
      orders: [],
      user: JSON.parse(localStorage.getItem('user') || '{}')
    }
  },
  created() {
    this.fetchOrders()
  },
  methods: {
    formatDate,
    async fetchOrders() {
      if (!this.user.id) {
        this.$message.error('用户未登录')
        return
      }
      
      this.loading = true
      try {
        let status = undefined
        if (this.activeTab !== 'all') {
          status = this.activeTab
        }
        
        const res = await getOrderList(this.user.id, status)
        if (res.code === 200) {
          this.orders = res.data
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
        this.$message.error('获取订单列表失败')
      } finally {
        this.loading = false
      }
    },
    handleTabChange() {
      this.fetchOrders()
    },
    getStatusText(status) {
      const statusMap = {
        0: '待支付',
        1: '已支付待取件',
        2: '已取件处理中',
        3: '已完成',
        4: '已取消'
      }
      return statusMap[status] || '未知状态'
    },
    getStatusType(status) {
      const typeMap = {
        0: 'warning',
        1: 'primary',
        2: 'primary',
        3: 'success',
        4: 'info'
      }
      return typeMap[status] || ''
    },
    viewOrderDetail(orderNo) {
      this.$router.push(`/user/order/detail?orderNo=${orderNo}`)
    },
    handlePay(orderNo) {
      this.$confirm('确认支付该订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const res = await payOrder(orderNo, 'alipay') // 简化处理，直接使用支付宝
          if (res.code === 200) {
            this.$message.success('支付成功')
            this.fetchOrders()
          } else {
            this.$message.error(res.message)
          }
        } catch (error) {
          this.$message.error('支付失败')
        }
      }).catch(() => {})
    },
    handleCancel(orderNo) {
      this.$confirm('确认取消该订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const res = await cancelOrder(orderNo)
          if (res.code === 200) {
            this.$message.success('订单已取消')
            this.fetchOrders()
          } else {
            this.$message.error(res.message)
          }
        } catch (error) {
          this.$message.error('取消订单失败')
        }
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.order-list-container {
  padding: 20px;
}
.empty-block {
  margin: 40px 0;
}
</style> 